<template>
  <div class="app-container">
    <el-col :span="24">
      <el-card style="margin-bottom: 30px">
        <p class="card-title"> <el-tag type="info" effect="dark">考试信息:</el-tag> </p>
        <el-row :gutter="10" class="card-line" style="float: left " >
          <el-tag type="success" style="font-size: medium">试卷名称: {{paper.paperName}}</el-tag>
        </el-row>
        <el-row :gutter="10" class="card-line" style="padding-left: 150px; float: left">
          <el-tag type="warning" style="font-size: medium">考生姓名: {{paper.createBy}}</el-tag>
        </el-row>
      </el-card>
    </el-col>

    <el-col :span="24">
      <el-card class="content-h" style="margin-bottom: 20px">
         <span v-for="(item, index) in markData" :key="item.quesId">
        <div v-show = "index == currentIndex">
        <div v-show="item.quesType == '简答题'">
            <div>
              <p>问答题</p>
              <p>{{ index + 1 }}.{{ item.quesName }}：</p>
            </div>
            <div>
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                :disabled="true"
                style="color: red"
                v-model="item.userAnswer">
            </el-input>
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入得分"
                v-model="answerScore">
            </el-input>
            </div>
        </div>
        </div>
        <div>

        </div>

      </span>

      </el-card>
    </el-col>


      <el-footer>
        <el-button  @click="subtract">上一题</el-button>
        <el-button @click="add">下一题</el-button>
        <el-button :plain="true" @click="submit">提交</el-button>
      </el-footer>


  </div>
</template>




<script>

import {addMark, examMarkList} from '@/api/store/detail'
import {paperById} from "@/api/store/paper";

export default {
  name: "markk",
  data(){
    return{
      currentIndex:0,
      paperName:undefined,
      createBy:undefined,
      markData:{},
      paper:{},
      answers:'',
      answerScore:undefined,
    };
  },

  created() {
    this.getRouterData();
  },

  methods:{
    //获取试卷信息
    getRouterData() {
      this.userId = this.$route.params.userId;
      this.paperId = this.$route.params.paperId;
      examMarkList({userId:this.$route.params.userId,paperId:this.$route.params.paperId}).then((response=>{
        this.markData = response.data;
        this.loading = false;
      }));
      paperById({paperId:this.$route.params.paperId}).then((response)=>{
        this.paper = response.data;
      });
    },

    open1() {
      this.$message({
        message: '批改试卷成功',
        type: 'success'
      });
    },

    submit(){
      addMark(this.submitDataInit()).then((res)=>{
      this.open1();
      this.$router.push("/stuList")
      })
    },

    submitDataInit(){
      let ary = this.markData.map((item) => {
          item.answerScore = this.answerScore;
          return item;
      });
      let param = {
        userId : parseInt(this.userId),
        paperId:parseInt(this.paperId),
        optionList:[],
      }
      param.optionList = ary.map(item=>{
        let obj = {
          quesId: item.quesId,
          quesType: item.quesType,
          answerScore: item.answerScore
        }
        if(item.quesType == "简答题"){
          obj.answerScore = item.answerScore
        return obj
          }
      })
      console.log('param',param)
      return param;
    },

    add() {
      if (this.currentIndex < this.markData.length - 1) {
        //储存当前题目的值 更新答案
        let question = this.markData[this.currentIndex];
        let down = this.markData[this.currentIndex + 1];
        if (question.quesType == "简答题") {
          question.answerScore = this.answerScore;
        }
        //获取下一道题目的答案，进行渲染
        if (down.quesType == "简答题") {
          this.answerScore =
            down.answerScore == undefined ? null : down.answerScore;
        }
        //切换当前题目的下标
        this.currentIndex = this.currentIndex + 1;
      }
    },
    //上一题
    subtract() {
      if (this.currentIndex > 0) {
        //储存上一题的选中值
        let question = this.markData[this.currentIndex];
        let up = this.markData[this.currentIndex - 1];
        //获取当前题目，记性答案的储存更新
        if (question.quesType == "简答题") {
          question.answerScore = this.answerScore;
        }
        //获取上一道题 进行答案的渲染
        if (up.quesType == "简答题") {
          this.answerScore =
            up.answerScore == undefined ? null : up.answerScore;
        }
        //切换当前题目的下标
        this.currentIndex = this.currentIndex - 1;
      }
    },

  }


}
</script>

<style scoped>

</style>
